import "./App.css";
import { Outlet } from "react-router";
import { Button, Space, Toast } from "antd-mobile";

const App = () => {
  const handleClick = () => {
    Toast.show({
      content: 'React 19 + Ant Design Mobile 工作正常！',
      position: 'center',
    });
  };

  return (
    <div className="content">
      <h1>Rsbuild with React 19</h1>
      <p>使用 pkg.pr.new 安装的 Ant Design Mobile</p>
      
      <Space direction="vertical" style={{ width: '100%', padding: '20px' }}>
        <Button 
          color="primary" 
          onClick={handleClick}
          style={{ width: '100%' }}
        >
          测试 React 19 兼容性
        </Button>
        
        <Button 
          color="success" 
          style={{ width: '100%' }}
        >
          成功按钮
        </Button>
        
        <Button 
          color="danger" 
          style={{ width: '100%' }}
        >
          危险按钮
        </Button>
      </Space>
      
      <Outlet />
    </div>
  );
};

export default App;
